<template>
  <div>
    <vue-canvas-poster :widthPixels="200" :painting="painting" @success="success" @fail="fail"/>
    <img class="share-img" :src="posterImg" alt="">
  </div>
</template>

<script>
export default {
  name: 'AntsShare',
  props: {
    data: {
      type: Object,
      default: () => {
      },
      required: true
    }
  },
  data() {
    return {
      posterImg: '',
      painting: {
        width: '100px',
        height: '150px',
        background: '',
        views: [
          {
            type: 'qrcode',
            content: '',
            css: {
              // bottom: '90px',
              // right: '76px',
              color: '#000',
              background: '#fff',
              width: '50px',
              height: '50px',
              borderColor: '#fff'
            }
          },
          {
            type: 'text',
            text: `微信扫码识别`, // 后端返回路径，这里特别坑，想象不到的bug，oss或者自己服务都允许跨域了，但在手机上还是会有出现cors跨域问题，可能是缓存问题，我们在路径上加个时间戳就好了0.0
            css: {
              bottom: '50px',
              right: '72px',
              color: 'rgb(35,25,25)',
              // fontSize: '18px'
            }
          },
        ]
      }
    }
  },
  methods: {
    success(src) {
      // console.log(src)
      this.posterImg = src
    },
    fail(err) {
      // console.log('fail', err)
    },
    initPainting() {
      // this.painting.views[0].url = this.data.cover
    }
  },
  mounted() {
    this.initPainting()
  }
}
</script>

<style scoped>

</style>
